<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<jsp:include  page="../header.jsp"/> 

		<form>
			<fieldset>
		    	<legend><strong>数据查询</strong></legend>
				
				<div class="form-inline">
				  	<div class="form-group">
				    	<label>日期：
				    		<input type="text" id="date" name="date" class="form-control" readonly="readonly" placeholder="日期">
				    	</label>
				  	</div>
				  	<div class="form-group">
				    	<label>项目：
				    		<select class="form-control" name="projectId" id="project">
				    			<option value="">---请选择项目---</option>
				    			<c:forEach items="${projectList}" var="list" varStatus="s"> 
				    			<option <c:choose><c:when test="${list.id == projectId}">selected</c:when></c:choose> value="${list.id}">${list.project_name}</option>
				    			</c:forEach>
				    		</select>
				    	</label>
				  	</div>

				  	<div class="form-group">
						&nbsp;&nbsp;已选择日期：

						<span id="searchBar">
							<c:forEach items="${datesList}" var="list" varStatus="s"> 
								<label style="padding: 0 5px"><input type="checkbox" checked>${list}</label>
							</c:forEach>
						</span>
				  	</div>

				  	<div class="form-group">
				  		<button type="button" class="btn btn-success" id="btnSearch"> 查询 </button>
				  		<span class="label label-info">不选择日期默认显示最近5次的数据</span>
				  	</div>
			  	</div>

			  	<br>
			  	<div>
				  	<!-- Nav tabs -->
				  	<ul class="nav nav-tabs" id="dateTableTab" role="tablist">
					<!--     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
				    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
				    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
				    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> -->
				  	</ul>

				  	<!-- Tab panes -->
				  	<div class="tab-content" id="dateTableTabContent">
					<!--     <div role="tabpanel" class="tab-pane active" id="home">..dfdsfd.</div>
				    <div role="tabpanel" class="tab-pane" id="profile">...</div>
				    <div role="tabpanel" class="tab-pane" id="messages">...</div>
				    <div role="tabpanel" class="tab-pane" id="settings">...</div> -->
				  	</div> 
				</div>
				
				<div id="home" style="display:none">
					test
				</div>
				
				<br><br>
				<div id="chartShowDivTps" style="width: 100%; height: 500px;">
					
				</div>

				<br><br>
				<div id="chartShowDivResponseTime" style="width: 100%; height: 500px;">
					
				</div>


				

			</fieldset>
		</form>


		<script type="text/javascript">
			require.config({
	            paths: {
	                echarts: '${basePath}asset/dist'
	            }
	        });

	        var dates = '${dates}';
         	var projectId = '${projectId}';

			function showChart(chartDiv, title, type) {
				require(
	            [
	                'echarts',
	                'echarts/chart/line',
	                'echarts/chart/bar'
	            ],
	            function (ec) {  
	                var option = {
	                	title : {
					        text : title        
					    },
					    tooltip : {
					        trigger: 'item'
					    },
					    legend: {
					    	orient: 'vertical',
					    	x: 'right',
					    	y: 'center',
					        data:[/*'WAF,MAC,1000并发','WAF,BLANK,1000并发','WAF,BEAR,1000并发'*/]
					    }, 
					    xAxis : [
					        {
					            type : 'category', 
					            data : [/*'2015-06-29','2015-06-30','2015-07-01'*/]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					        }
					    ],
					    series : [
					        // {
					        //     name:'WAF,MAC,1000并发',
					        //     type:'line',            
					        //     data:[
					        //         4800, 6000, 5000 
					        //     ]
					        // },
					        // {
					        //     name:'WAF,BLANK,1000并发',
					        //     type:'line',            
					        //     data:[
					        //         2800, 8000, 5500 
					        //     ]
					        // },
					        // {
					        //     name:'WAF,BEAR,1000并发',
					        //     type:'line',            
					        //     data:[
					        //         6800, 3000, 8500 
					        //     ]
					        // }
					    ]
					};
                    
                    

                    if (dates || projectId) {
						$.ajax({
			            	type: "GET",
			             	url: "${basePath}chart/showAjaxData",
			             	data: {dates : dates, projectId : projectId, type : type},
			             	dataType: "json",
			             	beforeSend: ajaxBeforeSend(),
		             		complete: ajaxComplete(),
			             	success: function(data){ 
			             		if (data.status == 200) { 
			             			option.xAxis[0].data = data.data.xAxisData;		             			
			             			option.legend.data = data.data.legend; 
			             			var series = data.data.series;
			             			$.each(series, function(i) {
			             				series[i].itemStyle = {normal: {label: {show: true}}};
			             				// series[i].showAllSymbol = true;
			             			});

			             			option.series = series;

			             			var height = data.data.legend.length * 30 < 500 ? 500 : data.data.legend.length * 30;
			             			$('#' + chartDiv).height(height);

			             			var myChart = ec.init(document.getElementById(chartDiv), 'macarons');
			             			myChart.setOption(option);  


			             			//画表格
			             			if (data.data.dataList) {
			             				var xAxisData = data.data.xAxisData;
			             				var dataList = data.data.dataList;
				             			$.each(xAxisData, function(i) {
				             				$('#dateTableTab').append('<li role="presentation" '+ (i == xAxisData.length - 1 ? 'class="active"' : '') +'><a href="#'+ xAxisData[i] +'" aria-controls="'+ xAxisData[i] +'" role="tab" data-toggle="tab"><strong>'+ xAxisData[i] +'</strong></a></li>');
					
				             				var html = '<table class="table table-striped">';
				             				html += '<thead>';
				             				html += '<tr>';
				             				html += '<th width="120">项目</th>';
				             				html += '<th width="230">模块</th>';
				             				html += '<th width="120">并发用户</th>';
				             				html += '<th width="180">TPS</th>';
				             				html += '<th width="120">响应时间</th>';
				             				html += '<th width="120">成功率</th>';
				             				html += '<th width="150">成功请求</th>';
				             				html += '<th width="150">失败请求</th>';
				             				html += '<th>失败备注</th>';
				             				html += '</tr>';
				             				html += '</thead>';
				             				html += '<tbody>';

											$.each(dataList, function(j) {
				             					if (dataList[j].date == xAxisData[i]) {				             						
				             						html += '<tr>';
						             				html += '<td>'+ dataList[j].projectName +'</td>';
						             				html += '<td>'+ dataList[j].moduleName +'</td>';
						             				html += '<td>'+ dataList[j].concurrentUser +'</td>';
						             				html += '<td>'+ dataList[j].tps +'</td>';
						             				html += '<td>'+ dataList[j].responseTime +'</td>';
						             				html += '<td>'+ dataList[j].successRate +'</td>';
						             				html += '<td>'+ dataList[j].successReponse +'</td>';
						             				html += '<td>'+ dataList[j].errorReponse +'</td>';
						             				html += '<td>'+ dataList[j].remark +'</td>';
						             				html += '</tr>';
				             					}
				             				})
				             				html += '</tbody>';
				             				html += '</table>';

				             				$('#dateTableTabContent').append('<div role="tabpanel" class="tab-pane '+ (i == xAxisData.length - 1 ? 'active' : '') +'" id="'+ xAxisData[i] +'">'+ html +'</div>');
				             			})

										//计算 TPS 变化情况
				             			var tableLength = $('#dateTableTabContent').find('div').length;
				             			if (tableLength > 1) {
					             			var lastTable = $('#dateTableTabContent').find('div:eq('+ (tableLength - 1) +') tbody tr');
					             			var perTable = $('#dateTableTabContent').find('div:eq('+ (tableLength - 2) +') tbody tr');

					             			$.each(lastTable, function(i) {
					             				var projectName = $(this).find('td:eq(0)').html();
					             				var moduleName = $(this).find('td:eq(1)').html();
					             				var concurrentUser = $(this).find('td:eq(2)').html();
					             				var tps = $(this).find('td:eq(3)').html();
					             				var that3 = $(this).find('td:eq(3)');

					             				var project = projectName + moduleName + concurrentUser;

					             				$.each(perTable, function(i) {
					             					var projectNamePer = $(this).find('td:eq(0)').html();
						             				var moduleNamePer = $(this).find('td:eq(1)').html();
						             				var concurrentUserPer = $(this).find('td:eq(2)').html();
						             				var tpsPer = $(this).find('td:eq(3)').html();

						             				var projectPer = projectNamePer + moduleNamePer + concurrentUserPer;


						             				tps = parseFloat(tps);
						             				tpsPer = parseFloat(tpsPer);
						             				if (projectPer == project) { 
						             					if (tps > 0) {
						             						if (that3.text().indexOf('(') < 0) { 
								             					if (tpsPer >= tps) {					             						
								             						that3.css('color', 'green');
								             						that3.css('font-weight', 'bold');

								             						that3.append(" (" + (100 - (tps / tpsPer) * 100).toFixed(2) + "%)");
								             					} else {
								             						that3.css('color', 'red');
								             						that3.css('font-weight', 'bold');

								             						that3.append(" (" + ((tps / tpsPer) * 100 - 100).toFixed(2) + "%)");
								             					}

								             					// console.log(tps, tpsPer);
								             				}
						             					}
						             				}
					             				})
					             			})
										}

			             			}

			             		} else {
			             			// layer.alert(data.message);
			             		}
			         		}
						}) 
					}


	            })
			}

			function ajaxBeforeSend() {
				layer.load(1, {
				    shade: [0.3,'#000']  
				});
			}

			function ajaxComplete() {
				layer.closeAll('loading');
			}

			$(document).ready(function(){
				$("#date").datetimepicker({
					format: 'yyyy-mm-dd', 
					todayBtn: true,
					language: 'zh-CN',
					minView: 2
				}).on('changeDate', function(ev){
					var dateVal = $("#date").val();
					var isHave = false;
					$('#searchBar label').each(function(i) {
						if (dateVal == $(this).text()) {
							isHave = true;
						}
					})
					if (isHave) return;

					var html = '<label style="padding: 0 5px"><input type="checkbox" checked>' + dateVal + '</label>';
					$('#searchBar').append(html);
				});

				$('#searchBar').on('click', 'label', function() {
					$(this).remove();
				})


				$('#btnSearch').click(function() {
					var arr = [];
					$('#searchBar label').each(function(i) {
						arr.push($(this).text());
					})

					// var arrStr = arr.join(',');

					if (arr) {
						location.href = '${basePath}chart/show?projectId='+ $('#project').val() +'&dates=' + arr.join(',');
					} else {
						location.href = '${basePath}chart/show?projectId='+ $('#project').val();
					}
				})

				if (projectId || dates) {
					showChart('chartShowDivTps', 'TPS', 'tps');  
					showChart('chartShowDivResponseTime', '响应时间', 'responsetime');
				}
			})
		</script>

<jsp:include  page="../footer.jsp"/> 